<!--
    * Time    : 2021-03-11 19:44:12
    * Author  : zhangTj
    * Desc    : 图片单选/多选
-->

<template>
    <div class="p-15p">
        <div class="font-14">
            <span class="text-danger" v-if="value.required">*</span>
            {{ index + 1 }}.{{ value.title }}
        </div>
        <div class="py-1">
            <div  :class="[value.showOff == 'single' ? 'd-flex flex-column' : 'grid-column2 grid-rc-10 j-item-center a-center']">
                <!-- 单选 -->
                <template v-if="value.subType == 'radio'">
                    <div
                        v-for="(pic, index) in value.optionList"
                        :key="index"
                        @click="previewImg(pic)"
                        class="position-relative bg-fff"
                        :class="[value.showOff == 'single' ? 'pic__singlecol' : 'pic__multipleCol', pic.value.length ? 'border border-ccc' : '']"
                    >
                        <van-radio-group v-model="value.content">
                            <div v-if="!pic.value.length" class="w-100" style="height: 165px">
                                <div style="background: #fbfdff" class="flex-center w-100 h-100 border-dashed-ccc">
                                    <i class="iconfont iconpicture"></i>
                                </div>
                            </div>

                            <div class="w-100 h-100" :class="[value.showOff == 'single' ? '' : 'overflow-h']" v-else>
                                <img :src="$imgUrlHead + pic.value[0]" class="w-100 h-auto" alt="" />
                            </div>
                            <div
                                @click.stop="value.content = pic.id"
                                class="position-absolute px-07p py-03p rounded-20 d-flex a-center"
                                style="bottom: 10px; left: 10px; background: rgba(0, 0, 0, 0.5)"
                            >
                                <van-radio class="mr" :name="pic.id" :checked-color="themes.color" />
                                <span class="font-14 text-fff">选这个</span>
                            </div>
                            <div
                                v-if="value.showOff == 'single' && index == 0"
                                class="position-absolute rounded-20 d-flex a-center px-07p py-03p"
                                style="bottom: 10px; right: 10px; background: rgba(0, 0, 0, 0.5)"
                            >
                                <span class="font-14 text-fff">细节图&nbsp;{{ pic.value.length }}</span>
                            </div>
                        </van-radio-group>
                    </div>
                </template>

                <!-- 多选 -->
                <template v-else>
                    <div
                        v-for="(pic, index) in value.optionList"
                        :key="index"
                        @click="previewImg(pic)"
                        class="position-relative bg-fff overflow-h"
                        :class="[value.showOff == 'single' ? 'pic__singlecol' : 'pic__multipleCol', pic.value.length ? 'border border-ccc' : '']"
                    >
                        <van-checkbox-group v-model="value.content">
                            <div v-if="!pic.value.length" class="w-100" style="height: 165px">
                                <div style="background: #fbfdff" class="flex-center w-100 h-100 border-dashed-ccc">
                                    <i class="iconfont iconpicture"></i>
                                </div>
                            </div>

                            <div class="w-100 h-100" :class="[value.showOff == 'single' ? '' : '']" v-else>
                                <img :src="$imgUrlHead + pic.value[0]" class="w-100 h-auto" alt="" />
                            </div>
                            <div
                                @click.stop="toggle(index)"
                                class="position-absolute px-07p py-03p rounded-20 d-flex a-center"
                                style="bottom: 10px; left: 10px; background: rgba(0, 0, 0, 0.5)"
                            >
                                <van-checkbox :name="pic.id" ref="checkboxes" class="mr" shape="square" :checked-color="themes.color" />
                                <span class="font-14 text-fff">选这个</span>
                            </div>
                            <div
                                v-if="value.showOff == 'single' && index == 0"
                                class="position-absolute rounded-20 d-flex a-center px-07p py-03p"
                                style="bottom: 10px; right: 10px; background: rgba(0, 0, 0, 0.5)"
                            >
                                <span class="font-14 text-fff">细节图&nbsp;{{ pic.value.length }}</span>
                            </div>
                        </van-checkbox-group>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { ImagePreview } from 'vant'

export default {
    name: 'PhotoSelect',
    props: {
        value: Object,

        index: {
            type: Number | String,
            default: 0
        }
    },
    computed: {
        ...mapState(['themes'])
    },
    methods: {
        toggle(index) {
            this.$refs.checkboxes[index].toggle()
        },

        // 预览图片
        previewImg(picList) {
            ImagePreview({
                images: picList.value.map((item) => this.$imgUrlHead + item),
                startPosition: 0
            })
        }
    }
}
</script>

<style scoped>
.wrap {
    display: flex;
}

.wrap {
    display: flex;
}
.pic__multipleCol {
    width: 3rem;
    height: 3rem;
}

.pic__singlecol {
    width: 100%;
    min-height: 100px;
    margin-bottom: 5px;
}

.pic__singlecol:last-child {
    margin-bottom: 0;
}
</style>
